<template>
  <div class="search-container" v-loading="loading">
    <el-form v-model="searchPage" inline="true" >
      <el-form-item label="登记号：">
        <el-input v-model="searchPage.regNum" />
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input v-model="searchPage.name" />
      </el-form-item>
      <el-form-item label="现病史：">
        <el-input v-model="searchPage.nowHis" />
      </el-form-item>
      <el-form-item label="既往史：">
        <el-input v-model="searchPage.pastHis" />
      </el-form-item>
      <el-form-item label="用药:">
        <el-input v-model="searchPage.medicine" />
      </el-form-item>
      <el-form-item label="诊断：">
        <el-input v-model="searchPage.diagnoses" placeholder="多个查询请用英文逗号,分割"/>
      </el-form-item>
      <el-form-item v-if="!searchPage.diagnoses" label="诊断选择：">
        <el-select v-model="searchPage.diagnoseId" placeholder="选择诊断" multiple clearable>
          <el-option value="慢性乙型病毒性肝炎" label="慢性乙型病毒性肝炎"/>
          <el-option value="乙型病毒性肝炎" label="乙型病毒性肝炎"/>
          <el-option value="乙型肝炎肝硬化" label="乙型肝炎肝硬化"/>
          <el-option value="乙型肝炎后肝硬化失代偿期" label="乙型肝炎后肝硬化失代偿期"/>
          <el-option value="乙型病毒性肝炎病原携带者" label="乙型病毒性肝炎病原携带者"/>
          <el-option value="非酒精性脂肪肝" label="非酒精性脂肪肝"/>
          <el-option value="脂肪肝" label="脂肪肝"/>
          <el-option value="酒精性脂肪肝" label="酒精性脂肪肝"/>
          <el-option value="肝细胞癌" label="肝细胞癌"/>
          <el-option value="自身免疫性肝炎" label="自身免疫性肝炎"/>
          <el-option value="自身免疫性肝硬化" label="自身免疫性肝硬化"/>
          <el-option value="原发性胆汁性肝硬化" label="原发性胆汁性肝硬化"/>
          <el-option value="Q热" label="Q热"/>
          <el-option value="艾滋病" label="艾滋病"/>
          <el-option value="发热待查" label="发热待查"/>
          <el-option value="乏力" label="乏力"/>
          <el-option value="腹痛" label="腹痛"/>
          <el-option value="肝豆状核变性" label="肝豆状核变性"/>
          <el-option value="肝功能不全" label="肝功能不全"/>
          <el-option value="肝内胆管癌" label="肝内胆管癌"/>
          <el-option value="肝内胆汁淤积症" label="肝内胆汁淤积症"/>
          <el-option value="肝囊肿" label="肝囊肿"/>
          <el-option value="肝区不适" label="肝区不适"/>
          <el-option value="肝衰竭" label="肝衰竭"/>
          <el-option value="肝性脑病" label="肝性脑病"/>
          <el-option value="肝移植状态" label="肝移植状态"/>
          <el-option value="肝硬化失代偿期" label="肝硬化失代偿期"/>
          <el-option value="肝占位性病变" label="肝占位性病变"/>
          <el-option value="肝肿瘤" label="肝肿瘤"/>
          <el-option value="高胆红素血症" label="高胆红素血症"/>
          <el-option value="高血压" label="高血压"/>
          <el-option value="高脂血症" label="高脂血症"/>
          <el-option value="黄疸" label="黄疸"/>
          <el-option value="急性黄疸型肝炎" label="急性黄疸型肝炎"/>
          <el-option value="急性戊型肝炎" label="急性戊型肝炎"/>
          <el-option value="酒精性肝硬化" label="酒精性肝硬化"/>
          <el-option value="慢加急性肝衰竭" label="慢加急性肝衰竭"/>
          <el-option value="慢性丙型病毒性肝炎" label="慢性丙型病毒性肝炎"/>
          <el-option value="梅毒" label="梅毒"/>
          <el-option value="皮肤感染" label="皮肤感染"/>
          <el-option value="妊娠状态" label="妊娠状态"/>
          <el-option value="腮腺炎" label="腮腺炎"/>
          <el-option value="失眠" label="失眠"/>
          <el-option value="水肿" label="水肿"/>
          <el-option value="糖耐量受损" label="糖耐量受损"/>
          <el-option value="体检" label="体检"/>
          <el-option value="戊型肝炎抗体阳性" label="戊型肝炎抗体阳性"/>
          <el-option value="消瘦" label="消瘦"/>
          <el-option value="药物性肝炎" label="药物性肝炎"/>
          <el-option value="晕厥" label="晕厥"/>
          <el-option value="直肠恶性肿瘤术后" label="直肠恶性肿瘤术后"/>
          <el-option value="转氨酶升高" label="转氨酶升高"/>
        </el-select>
      </el-form-item>
      <el-form-item label="就诊时间：">
        <el-date-picker
          v-model="searchPage.diagnoseTimes"
          type="daterange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :size="size"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button type="primary" @click="onCreate">新建</el-button>
        <el-button @click="onExport">导出</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="data-container">
      <el-table :data="tableData" style="width: 100%">
      <!--<el-table-column type="selection" width="55" />-->
      <el-table-column type="index" width="80" label="序号"/>
      <el-table-column prop="patient.regNum" label="登记号" width="160" />
      <el-table-column prop="patient.name" label="姓名" width="120" />
      <el-table-column prop="patient.sex" label="性别" width="120" >
        <template #default="scope">
          <el-select v-model="scope.row.patient.sex" placeholder="" name="patient.sex" disabled >
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="patient.age" label="年龄" width="120" />
      <el-table-column prop="nowHis" label="现病史" width="120" />
      <el-table-column prop="pastHis" label="既往史" width="120" />
      <el-table-column prop="diagnoseId" label="诊断名称" width="500px">
        <template #default="scope">
          <el-select v-model="scope.row.diagnoseId" placeholder="" style="width: 440px" multiple name="diagnoseId" disabled >
            <el-option value="慢性乙型病毒性肝炎" label="慢性乙型病毒性肝炎"/>
            <el-option value="乙型病毒性肝炎" label="乙型病毒性肝炎"/>
            <el-option value="乙型肝炎肝硬化" label="乙型肝炎肝硬化"/>
            <el-option value="乙型肝炎后肝硬化失代偿期" label="乙型肝炎后肝硬化失代偿期"/>
            <el-option value="乙型病毒性肝炎病原携带者" label="乙型病毒性肝炎病原携带者"/>
            <el-option value="非酒精性脂肪肝" label="非酒精性脂肪肝"/>
            <el-option value="脂肪肝" label="脂肪肝"/>
            <el-option value="酒精性脂肪肝" label="酒精性脂肪肝"/>
            <el-option value="肝细胞癌" label="肝细胞癌"/>
            <el-option value="自身免疫性肝炎" label="自身免疫性肝炎"/>
            <el-option value="自身免疫性肝硬化" label="自身免疫性肝硬化"/>
            <el-option value="原发性胆汁性肝硬化" label="原发性胆汁性肝硬化"/>
            <el-option value="Q热" label="Q热"/>
            <el-option value="艾滋病" label="艾滋病"/>
            <el-option value="发热待查" label="发热待查"/>
            <el-option value="乏力" label="乏力"/>
            <el-option value="腹痛" label="腹痛"/>
            <el-option value="肝豆状核变性" label="肝豆状核变性"/>
            <el-option value="肝功能不全" label="肝功能不全"/>
            <el-option value="肝内胆管癌" label="肝内胆管癌"/>
            <el-option value="肝内胆汁淤积症" label="肝内胆汁淤积症"/>
            <el-option value="肝囊肿" label="肝囊肿"/>
            <el-option value="肝区不适" label="肝区不适"/>
            <el-option value="肝衰竭" label="肝衰竭"/>
            <el-option value="肝性脑病" label="肝性脑病"/>
            <el-option value="肝移植状态" label="肝移植状态"/>
            <el-option value="肝硬化失代偿期" label="肝硬化失代偿期"/>
            <el-option value="肝占位性病变" label="肝占位性病变"/>
            <el-option value="肝肿瘤" label="肝肿瘤"/>
            <el-option value="高胆红素血症" label="高胆红素血症"/>
            <el-option value="高血压" label="高血压"/>
            <el-option value="高脂血症" label="高脂血症"/>
            <el-option value="黄疸" label="黄疸"/>
            <el-option value="急性黄疸型肝炎" label="急性黄疸型肝炎"/>
            <el-option value="急性戊型肝炎" label="急性戊型肝炎"/>
            <el-option value="酒精性肝硬化" label="酒精性肝硬化"/>
            <el-option value="慢加急性肝衰竭" label="慢加急性肝衰竭"/>
            <el-option value="慢性丙型病毒性肝炎" label="慢性丙型病毒性肝炎"/>
            <el-option value="梅毒" label="梅毒"/>
            <el-option value="皮肤感染" label="皮肤感染"/>
            <el-option value="妊娠状态" label="妊娠状态"/>
            <el-option value="腮腺炎" label="腮腺炎"/>
            <el-option value="失眠" label="失眠"/>
            <el-option value="水肿" label="水肿"/>
            <el-option value="糖耐量受损" label="糖耐量受损"/>
            <el-option value="体检" label="体检"/>
            <el-option value="戊型肝炎抗体阳性" label="戊型肝炎抗体阳性"/>
            <el-option value="消瘦" label="消瘦"/>
            <el-option value="药物性肝炎" label="药物性肝炎"/>
            <el-option value="晕厥" label="晕厥"/>
            <el-option value="直肠恶性肿瘤术后" label="直肠恶性肿瘤术后"/>
            <el-option value="转氨酶升高" label="转氨酶升高"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="diagnoseTime" label="就诊日期" width="200" />
      <el-table-column prop="nextDiagnoseTime" label="下次就诊日期" width="200" />
      <el-table-column prop="medicine" label="用药" width="120"/>
      <el-table-column prop="memo" label="备注" width="200" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column fixed="right" label="操作" width="240">
        <!-- vue3中 solt-scop已经放弃使用 -->
        <template #default="scope">
          <el-button text type="primary" size="small" @click="handleInfo(scope.row)">详情</el-button>
          <el-button text type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button text type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <el-pagination
      v-model:currentPage="searchPage.current"
      v-model:page-size="searchPage.pageSize"
      :page-sizes="[20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDatas.total"
      hide-on-single-page=true
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <DiagnoseForm :isShow="dialogVisible" @diaCancel="diaCnacel" :row="selectRow"></DiagnoseForm>
</template>

<script setup>
import { ref, onActivated } from 'vue'
import { ElMessage } from 'element-plus'
import { deleteById, exportData } from '@/api/common/common'
import { pageSearch } from '@/api/grk/index'
import DiagnoseForm from '../form/index.vue'
const tableDatas = ref({})

const tableData = ref([])

const dialogVisible = ref(false)

const loading = ref(false)

const selectRow = ref({})

const searchPage = ref({
  diagnoseId: [],
  pageSize: 20,
  current: 1,
  sortBy: ['id']
})

const searchFunction = async () => {
  loading.value = true
  const searchPa = searchPage.value
  if (Array.isArray(searchPage.value.diagnoseId)) {
    searchPa.diagnoseId = searchPage.value.diagnoseId.join(',')
  }
  pageSearch(searchPa, 'grk/diagnose').then(res => {
    const stores = res.content
    stores.forEach((item, index) => {
      if (item.diagnoseId) {
        stores[index].diagnoseId = item.diagnoseId.split(',')
      }
    })
    tableData.value = stores
    tableDatas.value.total = parseInt(res.totalElements)
    ElMessage.success('成功')
    loading.value = false
  }).catch(err => {
    ElMessage.success('失败' || err.message)
    loading.value = false
  })
}

onActivated(searchFunction())

const onSubmit = () => {
  searchFunction()
}

const onReset = () => {
  searchPage.value = {
    diagnoseId: [],
    pageSize: 20,
    current: 1,
    sortBy: ['id']
  }
  // 处理查询
  searchFunction()
}

const handleSizeChange = pageSize => {
  searchPage.value.pageSize = pageSize
  // 执行查询操作
  searchFunction()
}

const handleCurrentChange = current => {
  searchPage.value.current = current
  // 执行查询操作
  searchFunction()
}

const handleDelete = id => {
  deleteById(id, 'grk/diagnose').then(res => {
    ElMessage.warning('删除成功')
    // 重新刷新
    searchFunction()
  })
}

const handleEdit = row => {
  ElMessage.success('编辑')
  selectRow.value = row
  dialogVisible.value = true
}

const handleInfo = row => {
  ElMessage.success('详情')
  selectRow.value = row
}

const diaCnacel = status => {
  dialogVisible.value = status
  searchFunction()
  selectRow.value = {}
}

const onCreate = () => {
  selectRow.value = {}
  dialogVisible.value = true
}

const onExport = () => {
  const searchPa = searchPage.value
  if (Array.isArray(searchPage.value.diagnoseId)) {
    searchPa.diagnoseId = searchPage.value.diagnoseId.join(',')
  }
  exportData(searchPa, 'grk/diagnose').then(res => {
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    const fileName = new Date().getMinutes() + '.xlsx'
    // 这是设置表格的文件名
    if ('download' in document.createElement('a')) {
      // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      const binaryData = []
      binaryData.push(blob)
      elink.href = window.URL.createObjectURL(new Blob(binaryData))
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      // 释放URL 对象
      document.body.removeChild(elink)
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  })
}
</script>

<style>

</style>
